<template>
	<view class="upgrade" @click="onBack">
		<view class="Upgrade_box" @click.stop="kong">
			<view class="Upgrade_box_con">
				<view class="Upgrade_box_con_top">
					<image src="/static/index/Upgrade_box_con_top_bg.png"></image>
				</view>
				<view class="Upgrade_box_con_title">
					<text class="text1">版本更新</text>
					<text>{{pushVersion || ''}}</text>
				</view>

				<view class="Upgrade_box_con_center">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 80px;">
						<rich-text :nodes="pushUpdateContent"></rich-text>
					</scroll-view>
				</view>


				<view class="Upgrade_box_con_onsure" @click.stop="onsure" v-if="isUpgrade">
					立即更新
				</view>

				<view class="content" v-if="!isUpgrade">
					<view class="toast" v-show="!show">
						<text class="toast-text">
							正在下载中，请稍等...
						</text>
						<view class="progress">
							<cmd-progress :percent="downloadProgress" :strokeWidth="20" strokeShape="round" stroke-color="linear-gradient(to right, #f5696a, #f37274,#f5696a)"></cmd-progress>
						</view>
					</view>
					<view class="Upgrade_box_con_onsure_box">
						<view class="Upgrade_box_con_onsure" @click.stop="onInstall()" v-if="show">
							立即安装
						</view>
					</view>
				</view>
				<toast></toast>
			</view>
		</view>
	</view>

</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		data() {
			return {
				// 更新包下载进度
				downloadProgress: 0,
				// 是否显示下载进度遮罩
				// updateApp: false,
				// 当前版本号
				oldVersion: '',
				// 发现更新时新的版本号
				newVersion: '',
				// 显示安装
				show: false,
				// 版本更新内容
				content: '<p style="coloe:red">1.更新</p><p>2.更新</p> <p>3.更新</p>',
				// 下载完成后需要打开的文件路径
				fileName: '',
				isUpgrade: true, // 是否升级
				scrollTop: 0,
				isback: false, // 是否阻止退出
				appDownloadAddress: '', // 安装包路径
				popupBackgroundImage: '', // 图片路径
				pushUpdateContent: null, // 更新内容
				pushVersion: "", // 更新版本
				// 动态设置文字css
				activeColor: 'red',
				fontSize: 30
			}
		},
		onLoad(option) {
			// console.log(option)
			// this.appDownloadAddress = option.appDownloadAddress
			// this.popupBackgroundImage = option.popupBackgroundImage
			// this.pushUpdateContent = option.pushUpdateContent
			// this.pushVersion = option.pushVersion
			this.appDownloadAddress = "http://apk.sdzuhaoxia.com/zuhaoxia-v2.2.0-09171040.apk"
			this.pushUpdateContent = this.content
			this.pushVersion = '2.0.0'
			// #ifdef APP-PLUS
			this.oldVersion = plus.runtime.version
			// #endif

		},
		components: {
			cmdProgress
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			kong() {
				// 给一个点击事件防止点击退出 
			},
			// 下载安装包
			toUpdate() {
				// 下载地址
				let wgtUrl = this.appDownloadAddress;
				// 安装包的保存路径
				let savePath = "_downloads/update/";

				// 创建下载任务
				var dtask = plus.downloader.createDownload(wgtUrl, {
					filename: savePath
				}, function(d, status) {});
				// 添加监听器
				dtask.addEventListener("statechanged", this.onStateChanged, false);
				// 开始下载
				dtask.start();
			},
			/**
			 * 下载任务的监听器
			 * @param {Object} dtask
			 * @param {Object} status
			 */
			onStateChanged(dtask, status) {
				if (dtask.state == 4 && status == 200) {
					// console.log("下载完成")
					this.fileName = dtask.filename
					// 打开下载的安装包
					plus.runtime.openFile(this.fileName, function(error) {
						// console.log("open file failed: " + error);
					});
					// 100% 出现安装按钮
					this.show = true
				} else {
					// 隐藏tabbar
					// uni.hideTabBar()
					// 显示下载进度遮罩
					// this.updateApp = true
					// 获得目标文件的大小
					let totalSize = dtask.totalSize;
					// 获得已下载的大小
					let downloadedSize = dtask.downloadedSize;
					// 计算进度
					let dp = ((downloadedSize / totalSize) * 100).toFixed(0);
					// console.log(dp)
					this.downloadProgress = dp == 'NaN' ? 0 : dp;
					this.downloadProgress = Number(this.downloadProgress)
				}
			},
			onBackPress(e) {
				// // if()
				// if (this.isback == false) {
				// }

				// if (this.isback == true) {
				// 	this.$Toast.toast('正在更新中，请勿进行退出操作！', 2)
				// 	return true
				// }

			},
			onInstall() {
				// 打开安装包
				plus.runtime.openFile(this.fileName, function(error) {
					// console.log("open file failed: " + error);
				});
			},
			// 取消升级
			onCancel() {
				this.isback = false
				uni.navigateBack()
				
			},

			// 确定升级
			onsure() {
				this.isback = true
				this.isUpgrade = !this.isUpgrade //
				this.toUpdate() //下载安装包
			}
		},
		watch: {
			downloadProgress: {
				deep: true, //开启深度监视模式
			}
		}


	}
</script>

<style>
	page {
		font-size: 30rpx;
		line-height: 52rpx;
		background-color: rgba(0, 0, 0, 0);
	}

	.upgrade {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
	}

	.Upgrade_box {
		box-shadow: 0 0 10rpx #F5F5F5;
		border-radius: 12rpx;
		width: 604rpx;
		height: 664rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.Upgrade_box_con {
		position: relative;
		top: -90rpx;
	}

	.Upgrade_box_con_top image {
		width: 100%;
		height: 348rpx;
	}


	.Upgrade_box_con_title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.Upgrade_box_con_title .text1 {
		padding-right: 8rpx;
	}


	.Upgrade_box_con_center {
		padding: 10rpx 50rpx;
	}

	.Upgrade_box_con_onsure {
		margin-top: 30rpx;
		width: 384rpx;
		height: 80rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 42rpx;
		background-color: #F55B45;
		color: #FFFFFF;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.content {
		padding: 30rpx;
		position: relative;
	}

	.toast-text {
		font-size: 30rpx;
	}
</style>
